<template>
	<view>
		<u-gap></u-gap>
		<view class="list">
			<view class="center">
				<u-loading mode="circle" :show="loading"></u-loading>
			</view>
			<template v-if="!loading">
				<u-empty mode="list" :show="list == '' ? true : false"></u-empty>
				<template v-if="list != ''">
					<block v-for="(item,index) in list" :key="item.goodsId">
						<navigator :url="`/pages/productDetail/productDetail?id=${item.goodsId}`" class="item">
							<view style="width: 160rpx;">
								<u-lazy-load height="160" img-mode="aspectFill" border-radius="10" :image="item.goodsPhoto"></u-lazy-load>
							</view>
							<!-- <u-image width="160" height="160" border-radius="10" :src="item.goodsPhoto"></u-image> -->
							<view class="info">
								<view class="name">{{item.goodsName}}</view>
								<view class="order">
									<view class="price">￥{{item.salePrice}}</view>
								</view>
							</view>
						</navigator>
					</block>
					<u-loadmore :status="status"></u-loadmore>
					<u-gap></u-gap>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: [],
				loading: true,
			};
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.pageNo++
			this.status = 'loading'
			this.getList(res => {
				if (res != '') {
					this.list = this.list.concat(res)
					this.status = 'loadmore'
				} else {
					this.status = 'nomore'
				}
			})
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.status = 'loadmore'
			this.getList(res => {
				this.list = res
				uni.stopPullDownRefresh()
			})
		},
		onLoad() {
			this.pageNo = 1
			this.getList(res => {
				this.list = res
				this.loading = false
				if (this.list.length < 10) {
					this.status = 'nomore'
				}
			}, error => {
				this.loading = false
			})
		},
		methods: {
			getList(callback, fail = () => {}) {
				this.$u.post('goods/goodsbrowsehistory', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					if (res.list) {
						res.list.forEach(item => {
							let transformationArray = item.goodsPhoto.split(',')
							item.goodsPhoto = this.imageURL + transformationArray[0]
						})
					}
					callback(res.list)
				}).catch(error => {
					fail(error)
				})
			}
		}
	}
</script>

<style lang="scss">
	.center {
		display: flex;
		justify-content: center;
	}

	.list {
		margin: 0 30rpx;

		.item {
			background-color: #FFFFFF;
			padding: 30rpx;
			border-radius: 20rpx;
			display: flex;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;
				position: relative;

				.order {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					z-index: 2;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.price {
						color: #FF4E47;
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.name {
					font-size: 28rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>
